<!--
 * @Author: your name
 * @Date: 2021-01-04 11:38:57
 * @LastEditTime: 2021-01-25 23:45:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \yellow-member-admin\src\page\add-video\index.vue
-->
<template>
  <div class="add-img">
    <Breadcrumb :navList="['内容管理', '页面图片置入']"></Breadcrumb>
    <el-select v-model="subForm.page_id" placeholder="请选择落地页">
      <el-option
        v-for="item in pageList"
        :key="item.id"
        :label="item.page_name"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <ul class="img-upload">
     
      <li v-for="(item, index) in imageUrlList" :key="index + 'a'">
        <img :src="item" />
        <div class="son-div cover" @click="deleteImg(index)">
          <i class="el-icon-delete"></i>
        </div>
      </li>
      <li>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-change="qrcodeChange"
          :auto-upload="false"
          :limit="1000"
          multiple
          list-type="picture-card"
        >
          <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </li>
    </ul>
    <el-button type="primary" @click="uploadImg">确认上传</el-button>
  </div>
</template>

<script>
// import { compressImage } from "@/utils/compressImage"; // 图片压缩方法
export default {
  created() {
    this.getPageList();
  },
  data() {
    return {
      rawList: [],
      imageUrlList: [],
      pageList: [],
      subForm: {
       image:[],
       page_id:''
      }
    };
  },
  methods: {
    // 选中上传的图片
    qrcodeChange(files, fileList) {
      this.imageUrlList.push(files.url);
      this.rawList.push(files.raw);
    },
    // 删除即将上传的图片
    deleteImg(index) {
      this.rawList.splice(index, 1);
      this.imageUrlList.splice(index, 1);
      this.$message.success("删除成功");
    },
    // 获取页面列表
    async getPageList() {
      const { code, data } = await this.$api.getPages();
      if (!code) {
        this.pageList = data;
      }
    },
    // 上传图片
    async uploadImg() {
      this.subForm.image = this.rawList;
      if(!this.subForm.page_id || !Object.keys(this.subForm.image).length) {
       this.$message.error("选择参数有误!")
       return
      }
      const { code, data, msg } = await this.$api.addContent(this.subForm);
      if (!code) {
        this.imageUrlList = [];
        this.rawList = [];
        this.$message.success(msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.add-img {
 .el-select {
    margin-left: 22px;
}
  .img-upload {
    display: flex;
    flex-wrap: wrap;
    li {
      margin-left: 20px;
      margin-top: 20px;
      flex-shrink: 0;
      width: 200px;
      height: 150px;
      overflow: auto;
      background-color: #fbfdff;
      border: 1px dashed #c0ccda;
      border-radius: 6px;
      position: relative;
      img {
        margin: 10%;
        width: 80%;
        // height: 100%;
      }
      .cover {
        opacity: 0;
      }
      &:hover {
        .son-div.cover {
          transition: all 1s;
          opacity: 1;
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(44, 43, 43, 0.6);
          display: flex;
          justify-content: center;
          align-items: center;
          i {
            font-size: 25px;
          }
        }
      }
    }
  }
  .el-button {
    margin-left: 20px;
    margin-top: 30px;
  }
  .avatar-uploader {
    /*  width: 200px;
    height: 150px; */
    .el-upload {
      width: 100%;
      height: 100%;
    }
  }
}
</style>